
// 1.引入用来发送请求的方法，一定要补全路径
import { getSetting, chooseAddress, openSetting, showModal, showToast } from "../../utils/asyncWx.js"
/**
 * 1.获取用户的收货地址
 *   1）绑定点击事件
 *   2）调用小程序内置 api 获取用户收货地址 wx.chooseAddress
 * 2.获取用户对小程序所授予获取地址的权限状态 scope
 *   1）假设用户点击获取收货地址的提示框=>确定 scope值true  authSetting scope.address
 *   2）假设用户点击获取收货地址的提示框=>取消 scope值false
 *   3）假设用户从来没有调用过，收货地址的api  scope undefined
 *   4）诱导用户自己打开授权设置页面，当用户重新给予获取地址权限的时候
 *   5）获取收货地址
 *   6）把获取到的收货地址存入到本地存储中
 * 3.页面加载完毕
 *   1）onLoad onShow
 *   2）获取本地存储中的地址数据
 *   3）把数据设置给data中的一个变量
 * 4.onShow
 *   1）商品详情页 添加属性 num = 1 checked = true
 *   1）获取缓存中的购物车数组
 *   2）把购物车数据填充到data中
 * 5.全选的实现，数据展示
 *   1）onShow 获取缓存中的购物车数组
 *   2）根据购物车中的商品数据进行计算，所有的商品都被选中checked = true 全选就被选中
 * 6.总价格和总数量
 *   1）都需要商品被选中，我们才拿它来计算
 *   2）获取购物车数组
 *   3）遍历
 *   4）判断商品是否被选中
 *   5）总价格 += 商品的单价 * 商品的数量
 *   6）总数量 += 商品的数量
 *   7）把计算后的价格和数量，设置回data中即可
 * 7.商品的选中
 *   1）绑定change事件
 *   2）获取到被修改的商品对象
 *   3）商品对象的选中状态，取反
 *   4）重新填充回data中和缓存中
 *   5）重新计算全选，总价格，总数量...
 * 8.全选和反选
 *   1）全选复选框绑定事件 change
 *   2）获取data中的全选变量 allChecked
 *   3）直接取反 allChecked =! allChecked
 *   4）遍历购物车数组，让里面商品选中状态跟随 allChecked改变而改变
 *   5）把购物车数组和allChecked重新设置回data把购物车重新设置回缓存中
 * 9.商品数量的编辑
 *   1）"+" "-" 按钮，绑定同一个点击事件，区分的关键，自定义属性
 *      "+" "+1" "-" "-1" 
 *   2）传递被点击的商品ID goods_id
 *   3）获取data中的购物车数组，来获取需要被修改的商品对象
 *   4）当购物车的数量 =1 同时 用户 点击 "-"
 *      弹窗提示询问用户是否要删除  1.确定，直接删除 2.取消，什么都不做
 *   5）直接修改商品对象的数量num
 *   6）把cart数组，重新设置回缓存和data中 this.setCart
 * 10.点击结算
 *   1）判断有没有收货地址信息
 *   2）判断用户有没有选购商品
 *   3）经过以上验证，跳转到支付页面
 */

Page({
  data: {
    address: {}, // 收货地址
    cart: [], // 购物车商品列表
    allChecked: false, // 全选状态
    totalPrice: 0, // 商品总价格
    totalNum: 0 // 商品总数量
  },
  // 页面开始加载 就会触发
  onLoad() {
  },
  onShow() {
    // 1.获取缓存中的收货地址信息
    const address = wx.getStorageSync("address")
    // 1.获取缓存中的购物车数据
    const cart = wx.getStorageSync("cart") || []
    // 1.计算全选 every数组方法，会遍历接收一个回调函数，每一个回调函数都会返回true，那么every方法的返回值为true
    // const allChecked = cart.length ? cart.every(v => v.checked) : false
    let allChecked = true
    // 1.总价格
    let totalPrice = 0
    // 1.总数量
    let totalNum = 0
    // 给商品循环
    cart.forEach(v => {
      // 如果商品被选中
      if(v.checked) {
        // 计算总价格 = 数量 * 单价
        totalPrice += v.num * v.goods_price
        totalNum += v.num
      } else {
        // 商品未被选中
        allChecked = false
      }
    })
    // 判断数组是否为空
    allChecked = cart.length != 0 ? allChecked : false
    // 2.给data赋值
    this.setData({
      address,
      cart,
      allChecked,
      totalPrice,
      totalNum
    })
  },
  // 点击收货地址
  /*handleChooseAddress() {
    //console.log('选择收货地址')

    // 1.获取权限状态
    wx.getSetting({
      success: (result) => {
        // 2.获取权限状态，主要发现一些属性很怪异的时候，都要使用[]形式来获取属性值
        const scopeAddress = result.authSetting["scope.address"]
        if(scopeAddress === true || scopeAddress === undefined) {
          wx.chooseAddress({
            success: (res1) => {
              console.log(res1)
            }
          })
        } else {
          // 3.用户以前拒绝过授予权限，先引导用户打开授权页面
          wx.openSetting({
            success: (res2) => {
              // 4.可以调用收货地址代码
              wx.chooseAddress({
                success: (res3) => {
                  console.log(res3)
                }
              })
            }
          })
        }
      }
    })
  }*/
  async handleChooseAddress() {
    try {
      // 1.获取权限状态
      const res1 = await getSetting()
      const scopeAddress = res1.authSetting["scope.address"]
      // 2.判断权限状态
      if (scopeAddress === false) {
        await chooseAddress()
      }
      // 3.调用获取收货地址的api
      let address = await chooseAddress()
      address.all = address.provinceName + address.cityName + address.countyName + address.detailInfo
      // 4.存入到缓存中
      wx.setStorageSync("address", address)
    } catch (error) {
      console.log(error)
    }
  },
  // 商品选中（单选）
  handleItemChange(e) {
    // 1.获取被修改的商品的id
    const goods_id = e.currentTarget.dataset.id
    // console.log(goods_id)
    // 2.获取购物车数组
    let { cart } = this.data
    // 3.找到被修改的商品对象
    let index = cart.findIndex(v => v.goods_id === goods_id)
    // 4.选中状态取反
    cart[index].checked =! cart[index].checked
    // 
    this.setCart(cart)
  },
  // 设置购物车状态同时，重新计算，底部工具栏的数据，全选，总价格，购买的数量 （这是封装方法）
  setCart(cart) {

    let allChecked = true
    // 1.总价格
    let totalPrice = 0
    // 1.总数量
    let totalNum = 0
    // 给商品循环
    cart.forEach(v => {
      // 如果商品被选中
      if (v.checked) {
        // 计算总价格 = 数量 * 单价
        totalPrice += v.num * v.goods_price
        totalNum += v.num
      } else {
        // 商品未被选中
        allChecked = false
      }
    })
    // 判断数组是否为空
    allChecked = cart.length != 0 ? allChecked : false

    // 5.和6.把购物车数据重新设置回data中和缓存中
    this.setData({
      cart,
      totalPrice,
      totalNum,
      allChecked
    })
    // 7.放到本地存储
    wx.setStorageSync("cart", cart)
  },
  // 商品全选
  handleItemAllCheck() {
    // 1.获取data中的数据
    let { cart, allChecked } = this.data
    // 2.修改 值
    allChecked =! allChecked
    // 3.循环修改cart数组中的商品选中状态
    cart.forEach(v => v.checked = allChecked)
    // 4.把修改后的值，填充回data或者缓存中
    this.setCart(cart)
  },
  // 商品数量加减
  async handleItemNumEdit(e) {
    // 1.获取传递过来的参数
    const { operation, id } = e.currentTarget.dataset
    //console.log(operation, id)
    // 2.获取购物车数组
    let { cart } = this.data
    // 3.找到需要修改的商品的索引
    const index = cart.findIndex(v => v.goods_id === id)
    // 4.判断是否要执行删除 弹窗提示
    if(cart[index].num === 1 && operation === -1) {
      // 弹窗提示
      const res = await showModal({content: "您确定要删除商品吗？"})
      if (res.confirm) {
        cart.splice(index, 1) // 传递要删除的商品索引和数量
        this.setCart(cart)
      }
    } else {
      // 5.修改数量
      cart[index].num += operation
      // 6.设置回缓存和data中
      this.setCart(cart)
    }
  },
  // 结算
  async handlePay() {
    // 1.判断有没有收货地址
    const { address, totalNum } = this.data
    if(!address.userName) {
      await showToast({title: "请选择收货地址"})
      return
    }
    // 2.判断用户有没有选购商品
    if (totalNum === 0) {
      await showToast({ title: "您还没有选购商品" })
      return
    }
    // 3.跳转到支付页面
    wx.navigateTo({
      url: '/pages/pay/pay'
    })
  }
})
